<!--审批人设置-->
<template>
    <el-drawer :append-to-body="true"  v-model="visible" class="set_approver" :with-header="false"
        :show-close="false" :size="550" :before-close="saveApprover">
        <el-tabs v-model="activeName" class="set-tabs" @tab-click="handleTabClick">
            <el-tab-pane label="审批人设置" name="baseTab">
              <div class="approver-title">{{ displayName }}</div>
              <el-radio-group v-model="approverConfig.approvalUserType" class="clear" @change="changeType">
                <el-radio class="radio-item" v-for="({ value, label }) in approvalUserTypes" :key="value" :value="value">{{ label
                  }}</el-radio>
              </el-radio-group>
              <div class="approver_block input" v-if="['1','4'].includes(approverConfig.approvalUserType)">
                <p v-if="approverConfig.approvalUserType==='1'">指定成员</p>
                <p v-if="approverConfig.approvalUserType==='4'">指定部门负责人</p>
                <el-form-item>
                  <el-tree-select no-data-text="暂无数据" placeholder="请选择"  v-model="approverConfig.nodeApproveList"
                                   :data="store.userList" :multiple="true" :render-after-expand="false"
                                   show-checkbox check-strictly check-on-click-node />
                </el-form-item>
              </div>
              <div class="approver_block input" v-if="approverConfig.approvalUserType === '6'">
                <p>指定标签</p>
                <el-form-item>
                  <el-select  no-data-text="暂无数据" multiple filterable v-model="approverConfig.nodeApproveList" placeholder="请选择">
                    <el-option
                        v-for="item in store.tagList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="approver_block" >
                <p>多人审批方式</p>
                <el-radio-group v-model="approverConfig.countersignType" class="clear">
                  <el-radio value="1">或签（一名成员同意即可）</el-radio>
                  <br />
                  <el-radio value="2">会签（需所有成员同意）</el-radio>
                </el-radio-group>
              </div>
            </el-tab-pane>
            <el-tab-pane label="权限设置" name="btnTab">
              <el-scrollbar class="approver_permission" >
                <div class="approver_permission-content component" >
                  <div class="approver_permission-content-item">控件</div>
                  <div class="approver_permission-content-container">
                    <el-radio-group v-model="approverConfig.btnPermission['$$$component&&&']" class="clear" @change="fieldChange">
                      <el-radio :value="it.value" v-for="(it,k) in optionList2">{{it.label}}</el-radio>
                    </el-radio-group>
                  </div>
                </div>
                <div class="approver_permission-content" v-for="(item,key) in widgetList" :key="key">
                  <div class="approver_permission-content-item">{{item.label}}</div>
                  <div class="approver_permission-content-container sub-container">
                    <el-radio-group v-model="approverConfig.btnPermission[item.id]" class="clear">
                      <el-radio :value="it.value" v-for="(it,k) in optionList">{{it.label}}</el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </el-scrollbar>
            </el-tab-pane>
        </el-tabs>
        <div class="demo-drawer__footer clear">
            <el-button type="primary" @click="saveApprover">确 定</el-button>
            <el-button @click="closeDrawer">取 消</el-button>
        </div>

    </el-drawer>
</template>
<script setup>
import { ref, watch, computed } from 'vue'
import $func from '@/utils/index'
import {inputType, approvalUserTypes} from '@/utils/const'
import { useStore } from '../../stores/index'


let props = defineProps({
  processData:{
      type: Object,
      default: () => ({}),
  }
});

const getList = (widgetList,arr) => {
  widgetList.forEach(item=>{
    if (inputType.includes(item.type)){
      let opt = item.options;
      arr.push({
        label: opt.label,
        id: item.id,
        type: item.type
      })
    }
    if (item.type ==='grid'){
      let cols= item.cols
      cols.forEach(it=>{
        let li =it.widgetList ||[];
         getList(li,arr)
      })
    }
  })
}
const optionList = [
  {
    value:'1',// 隐藏
    label:'　'
  },
  {
    value: '2', // 查看
    label:'　'
  },
  {
    value: '3',// 可编辑
    label:'　'
  }
]
const optionList2 = [
  {
    value:'1',
    label:'隐藏'
  },
  {
    value: '2',
    label:'仅查看'
  },
  {
    value: '3',
    label:'可编辑'
  }
]
const widgetList = computed(()=>{
  let arr=[]
  let list =props.processData?.formJson?.widgetList || []
  getList(list,arr)
  return arr;
})

let approverConfig = ref({})
let store = useStore()
let { setApproverConfig, setApprover } = store
let approverConfig1 = computed(() => store.approverConfig1)
let approverDrawer = computed(() => store.approverDrawer)
let visible = computed({
    get() {
        return approverDrawer.value
    },
    set() {
        closeDrawer()
    }
})
const displayName = computed(() => {
  let approvalUserType =approverConfig.value.approvalUserType
  if (approvalUserType){
    let o = approvalUserTypes.find(item=>item.value === approvalUserType)
    return o.label
  }
  return '请选择'
})
const activeName = ref('baseTab')

const handleTabClick = (tab, event) => {
    //console.log(tab, event)
}
watch(approverConfig1, (val) => {
  console.log(val.value)
    approverConfig.value = val.value
})

const fieldChange = (val) => {
  widgetList.value.forEach(item=>{
    approverConfig.value.btnPermission[item.id]= val;
  })
}
const changeType = (val) => {
    approverConfig.value.nodeApproveList = [];
}

const saveApprover = () => {
  let s =$func.setApproverStr(approverConfig.value);
    approverConfig.value.error =  s === "请选择"
    setApproverConfig({
        value: approverConfig.value,
        flag: true,
        id: approverConfig1.value.id
    })
    closeDrawer()
}
const closeDrawer = () => {
    setApprover(false)
}
</script>
<style lang="scss" scoped>
.approver_block{
  color: black;
  font-weight: 400;
  font-size: 14px;
  margin-top: 5px;
  .clear{
    width: 50%;
  }
  p{
    margin-bottom: 5px;
  }
  &.input{
    margin: 20px 0;
  }
}
.approver-title{
  margin-bottom: 20px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding:5px 2px;
  color: black;
}
.el-drawer__body{
  --el-drawer-padding-primary: 20px 6px;
}
.set-tabs {
    //margin-left: 20px !important;
    //margin-right: 20px !important;
    height: calc(100% - 50px);
  .radio-item{
    display: inline-block;
    width: 33%;
    margin-right: 0;
  }
  .el-tab-pane{
    height: 100%;
  }

  .approver_permission{
    height: calc(100vh - 150px);
    .approver_permission-title{
      display: flex;
      border-bottom: 1px solid #eee;
      margin-bottom: 2px;
      align-items: center;
      .approver_permission-title-item{
        width: 25%;
        .approver_permission-title-container{
          display: flex;
        }
        &:first-child{
          width: 40%;
        }
      }
    }
    .approver_permission-content{

      &.component{
         background: #fafbfc;
        .approver_permission-content-item{
          position: relative;
          &::after{
            content: '';
            position: absolute;
            width: 1px;
            height: 70%;
            top: 6px;
            right: 5px;
            background: #ececee;
            z-index: 1;
          }
        }
        .el-radio{
          position: relative;
          &::after{
            content: '';
            position: absolute;
            width: 1px;
            height: 70%;
            top: 6px;
            right: -19px;
            background: #ececee;
            z-index: 1;
          }
        }
      }
      display: flex;
      border-bottom: 1px solid #eee;
      margin-bottom: 2px;
      .approver_permission-content-container{
        width: 60%;
        &.sub-container{
          .el-radio{
            margin-right: 53px;
          }
        }
      }
      .approver_permission-content-item{
        width: 25%;
        display: flex;
        align-items: center;
        &:first-child{
          width: 40%;
        }


      }
    }
  }
}







</style>
